<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" lang="zh">
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>发现</title>

<!--<link rel="stylesheet" href="http://local.res.layui.com/layui/src/css/layui.css">-->
  <link rel="stylesheet" href="../../../layui.css" media="all">
  <script src="../../../../layui.js" ></script>
  <script src="../../../../jquery.min.js"></script>
  <script src="../../../../../js/path.js"></script>
  <style>
    .layim-msgbox{margin: 15px;}
    .layim-msgbox li{position: relative; margin-bottom: 10px; padding: 0 130px 10px 60px; padding-bottom: 10px; line-height: 22px; border-bottom: 1px dotted #e2e2e2;}
    .layim-msgbox .layim-msgbox-tips{margin: 0; padding: 10px 0; border: none; text-align: center; color: #999;}
    .layim-msgbox .layim-msgbox-system{padding: 0 10px 10px 10px;}
    .layim-msgbox li p span{padding-left: 5px; color: #999;}
    .layim-msgbox li p em{font-style: normal; color: #FF5722;}

    .layim-msgbox-avatar{position: absolute; left: 0; top: 0; width: 50px; height: 50px;}
    .layim-msgbox-user{padding-top: 5px;}
    .layim-msgbox-content{margin-top: 3px;}
    .layim-msgbox .layui-btn-small{padding: 0 15px; margin-left: 5px;}
    .layim-msgbox-btn{position: absolute; right: 0; top: 12px; color: #999;}
  </style>
</head>
<body>

<div style="margin: 15px;">
  <div class="layui-fluid " style="">
    <div class="layui-card">
      <div class="layui-card-body">

        <div class="layui-tab">
          <ul class="layui-tab-title">
            <li class="layui-this">条件查询</li>
            <li>精确查询</li>
          </ul>
          <div class="layui-tab-content">
            <div class="layui-tab-item layui-show">
              <div class="layui-form-item">
                <label class="layui-form-label">名称<span style="color: red;">*</span></label>
                <div class="layui-input-block">
                  <input id="text" name="name" placeholder="请输入用户或群组名称" type="text" class="layui-input" lay-verify="required" required/>
                </div>
              </div>

              <!--<div class="layui-form-item">-->
                <!--<label class="layui-form-label">附加消息<span style="color: red;">*</span></label>-->
                <!--<div class="layui-input-block">-->
                  <!--<textarea id="message" placeholder="请输入附加消息" class="layui-textarea"></textarea>-->
                <!--</div>-->
              <!--</div>-->

              <div class="layui-form-item">
                <label class="layui-form-label">查询类型<span style="color: red">*</span></label>
                <div class="layui-input-block" >
                  <select id="mold" name="type" style="height: 35px">
                    <option value>请选择查询类型</option>
                    <option value="0">好友</option>
                    <option value="1">群</option>
                  </select>
                </div>
              </div>

              <div class="layui-form-item">
                <button class="layui-btn addLive" onclick="search()" >&emsp;查找&emsp;</button>
                <button class="layui-btn layui-btn-primary" type="button" onclick="close()">&emsp;返回&emsp;</button>
              </div>
            </div>
            <div class="layui-tab-item">
              <div class="layui-form-item">
                <label class="layui-form-label">id<span style="color: red;">*</span></label>
                <div class="layui-input-block">
                  <input id="friend" name="name" placeholder="请输入用户id" type="text" class="layui-input" lay-verify="required" required/>
                </div>
              </div>

              <div class="layui-form-item">
                <label class="layui-form-label">附加消息<span style="color: red;">*</span></label>
                <div class="layui-input-block">
                  <textarea id="content" placeholder="请输入附加消息" class="layui-textarea"></textarea>
                </div>
              </div>

              <div class="layui-form-item">
                <label class="layui-form-label">添加类型<span style="color: red">*</span></label>
                <div class="layui-input-block" >
                  <select id="type" name="type" style="height: 35px">
                    <option value>请选择添加类型</option>
                    <option value="0">好友</option>
                    <option value="1">群</option>
                  </select>
                </div>
              </div>

              <div class="layui-form-item">
                <button class="layui-btn addLive" onclick="addAsk()" >&emsp;提交&emsp;</button>
                <button class="layui-btn layui-btn-primary" type="button" onclick="close()">&emsp;返回&emsp;</button>
              </div>

            </div>
          </div>
        </div>


      </div>
    </div>
  </div>


    <!--  <blockquote class="layui-elem-quote">此为自定义的【查找】页面，因需求不一，所以官方暂不提供该模版结构与样式，实际使用时，可移至该文件到你的项目中，对页面自行把控。-->
<!--  <br>文件所在目录（相对于layui.js）：/css/modules/layim/html/find.html</blockquote>-->
</div>
<script>
layui.use(['layim', 'laypage','element'], function(){
  var layim = layui.layim
  ,layer = layui.layer
  ,laytpl = layui.laytpl
  ,$ = layui.jquery
  ,laypage = layui.laypage
  ,element = layui.element; //Tab的切换功能，切换事件监听等，需要依赖element模块
    //触发事件
    var active = {
        tabAdd: function(){
            //新增一个Tab项
            element.tabAdd('demo', {
                title: '新选项'+ (Math.random()*1000|0) //用于演示
                ,content: '内容'+ (Math.random()*1000|0)
                ,id: new Date().getTime() //实际使用一般是规定好的id，这里以时间戳模拟下
            })
        }
        ,tabDelete: function(othis){
            //删除指定Tab项
            element.tabDelete('demo', '44'); //删除：“商品管理”


            othis.addClass('layui-btn-disabled');
        }
        ,tabChange: function(){
            //切换到指定Tab项
            element.tabChange('demo', '22'); //切换到：用户管理
        }
    };

    $('.site-demo-active').on('click', function(){
        var othis = $(this), type = othis.data('type');
        active[type] ? active[type].call(this, othis) : '';
    });

    //Hash地址的定位
    var layid = location.hash.replace(/^#test=/, '');
    element.tabChange('test', layid);

    element.on('tab(test)', function(elem){
        location.hash = 'test='+ $(this).attr('lay-id');
    });
  //一些添加好友请求之类的交互参见文档
});

function search() {
    var text = $("#text").val()
    var type = $("#mold").val()
    $.post(baseUrl+'user/getUserOrGroupsByCondition', {"name":text,"type":type}, function(res){
        layer.open({
            type: 2 //此处以iframe举例
            ,title: '当你选择该窗体时，即会在最顶端'
            ,area: ['550px', '450px']
            ,shade: 0
            ,maxmin: true
            ,offset: "auto"
            ,content:  layui.cache.dir + 'css/modules/layim/html/searchuser.html?text='+text+"&type="+type
            ,btn: ['继续弹出', '关闭'] //只是为了演示
            ,yes: function(){
                $(that).click();
            }
            ,btn2: function(){
                layer.close();
            }
            ,zIndex: layer.zIndex //重点1
            ,success: function(layero){
                layer.setTop(layero); //重点2
            }
        });
    },"json");
}

//function close() {
//    alert("Asd")
//}
</script>
</body>
</html>
